<template>
    <div id="dashboard">
        <el-row :gutter="24">
            <el-col :span="24">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                    <br>
                    <el-row :gutter="20" class="mgb20">
                        <el-col :span="2"></el-col>
                        <el-col :span="18">
                            <div class="grid-content grid-con-1">
                                <el-input
                                    placeholder="请输入内容"
                                    prefix-icon="el-icon-search"
                                    maxlength="50"
                                    show-word-limit
                                    @change="search"
                                    v-model="input2">
                                </el-input>
                            </div>
                        </el-col>
                        &nbsp;
                        <el-col :span="2" style="margin-top:5px;">
                            <el-button icon="el-icon-search" type="success" circle></el-button>
                        </el-col>
                        <el-col :span="2"></el-col>
                    </el-row>
                </el-card>
                
                <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                                <el-tab-pane label="最热文章" name="hot_article"></el-tab-pane>
                                <el-tab-pane label="最新文章" name="new_article"></el-tab-pane>
                                <el-tab-pane label="最多阅读" name="view_article"></el-tab-pane>
                </el-tabs>
                <el-card shadow="hover" style="">
                    <el-row>
                        <el-col :span="12" v-for="scope in todoList" :key="scope" >
                            <el-card :body-style="{ padding: '0px' }" style="margin: 10px; min-width: 240px;" @click="watch_detail(scope)" shadow="hover">
                                <i style="text-align:left;">
                                    <el-rate
                                        v-model="scope.rate_star"
                                        :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                                        disabled
                                        :texts="text"
                                        allow-half
                                        void-icon-class="el-icon-lx-hotfill"
                                        :show-text=true
                                        text-color="white"
                                        style="background-color: #a1a3a6;"
                                        >
                                    </el-rate>
                                </i>

                                <el-row :gutter="24">
                                    
                                    <el-col :span="6" class="img_">
                                        <div>
                                            <el-image
                                                style="width: 100%; margin-top: auto;"
                                                v-bind:src="'data:image/png;base64,' + scope.logo"
                                                fit="fill">
                                            </el-image>
                                        </div>
                                    </el-col>
                                    <el-col :span="18">
                                        <div class="grid-content bg-purple" style="">
                                            <el-row :gutter="24">
                                                <el-col :span="24"><div class="grid-content bg-purple"><span class='title_span'>{{ scope.title.length &lt; 31 ? scope.title : scope.title.slice(0,31) + '...' }}</span></div></el-col>
                                            </el-row>
                                        </div>
                                        <div class="grid-content bg-purple">
                                            <el-row :gutter="24">
                                                <el-col :span="24">
                                                    <div>
                                                        <el-tag type="success" size="medium">{{ scope.a_type }}</el-tag>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <div class="grid-content bg-purple">
                                            <el-row :gutter="24">
                                                <el-col :span="24" style="margin-left: 5px;">
                                                    <div>
                                                        <el-tag
                                                            :key="tag"
                                                            v-for="tag in JSON.parse(scope.tags)"
                                                            :disable-transitions="false"
                                                            @close="handleClose(tag)" size="mini">
                                                            {{tag}}
                                                        </el-tag>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <div class="grid-content bg-purple" style=" padding: 0">
                                            <el-row type="flex" justify="space-between">
                                                <el-col>
                                                    <div class="grid-content bg-purple">
                                                        <i style="text-align:left;"><el-tag class="el-icon-lx-people" size="mini" style="font-size: 1px;" type="info">&nbsp;{{ scope.user.name }}</el-tag></i>
                                                        &nbsp;&nbsp;
                                                        <i style="text-align:left;"><el-tag class="el-icon-lx-time" size="mini" style="font-size: 1px;" type="info">&nbsp;{{ scope.add_time }}</el-tag></i>
                                                        &nbsp;&nbsp;
                                                        <i style="text-align:left;"><el-tag class="el-icon-lx-attention" size="mini" style="font-size: 1px;" type="info">&nbsp;{{ scope.view_count }}</el-tag></i>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="query.pageIndex"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
// import Schart from "vue-schart";
import _global from './Global.vue'
export default {
    name: "dashboard",
    data() {
        return {
            query: {
                address: "",
                name: "",
                pageIndex: 1,
                pageSize: 10
            },
            pageTotal: 0,
            userImgPath: "data:image/png;base64," + localStorage.getItem("user_img_path"),
            name: localStorage.getItem("ms_username"),
            todoList: [],
            value: 1,
            text: ['崭新', '无奇', '小牛', '大成', '至尊'],
            inputVisible: false,
            inputValue: '',
            activeName: 'hot_article',
            input2: '',
            currentDate: new Date()
        };
    },
    components: {
        // Schart
    },
    computed: {
    },
    created() {
        this.init_func()
    },
    methods: {
        cl(scope){
            console.log(scope.aid)
        },
        handlePageChange(val){
            this.query.pageIndex=val;
            this.getData(val);
        },
        getData(val) {
            fetch(`http://${_global.request_host}:${_global.reuqest_port}/article/new_list?types=2&sort=${this.activeName}&page_num=${val}`, {
                headers:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'token': localStorage.getItem('token')
                },
            })
            .then(resp => resp.json())
            .then(json => {
                if(json.code==200){
                    this.todoList = json.results.message;
                    this.pageTotal = json.results.page_total
                }
            })
        },
        search() {
            console.log(this.input2)
        },
        handleClick(tab, event) {
            console.log(tab, event);
            this.init_func()
        },
        init_func() {
            fetch(`http://${_global.request_host}:${_global.reuqest_port}/article/new_list?types=2&sort=${this.activeName}`, {
                headers:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'token': localStorage.getItem('token')
                },
            })
            .then(resp => resp.json())
            .then(json => {
                if(json.code==200){
                    this.todoList = json.results.message;
                    this.pageTotal = json.results.page_total
                    this.query.pageIndex = 1
                }
            })
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() +
                    1}/${date.getDate()}`;
            });
        },
        watch_detail(scope) {
            localStorage.setItem('watch_id', scope.aid)
            // this.view_count = 1 + this.view_count
            // localStorage.setItem('view_count', this.view_count)
            this.$router.push('/MDDetail')
        },
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                console.log(_)
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
            this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        }
    }
};
</script>

<style scoped>
#dashboard {
    min-width: 1500px;
}

.el-row {
    margin-bottom: 0;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: #999;
}

.grid-num {
    font-size: 20px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 10px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 13px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}

.el-tag + .el-tag {
    margin-left: 10px;
    margin-top: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    margin-top: 10px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
    margin-top: 10px;
    margin-left: 10px;
    vertical-align: bottom;
}


.time {
    font-size: 13px;
    color: #999;
}
  
.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
  
.clearfix:after {
    clear: both
}

.title_span {
    font-size: 15px;
    font-weight: 400;
    line-height: 50px;
}

.img_ {
    
    display:flex;
    justify-content:center;/*主轴上居中*/
    align-items:center;/*侧轴上居中*/
}
</style>
